﻿
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>欢迎登录后台管理系统--模板之家 www.cssmoban.com</title>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
    <script language="JavaScript" src="js/jquery.js"></script>
    <script src="js/cloud.js" type="text/javascript"></script>
    <script src="js/vue.js" type="text/javascript"></script>
    <script src="js/axios.min.js" type="text/javascript"></script>
    <script src="js/my_base_config.js" type="text/javascript"></script>

    <script language="javascript">
        if (self.location!=top.location){
            top.location.href==self.location.href;
        }

        $(function () {
            $('.loginbox').css({'position': 'absolute', 'left': ($(window).width() - 692) / 2});
            $(window).resize(function () {
                $('.loginbox').css({'position': 'absolute', 'left': ($(window).width() - 692) / 2});
            })
        });
    </script>

</head>

<body style="background-color:#1c77ac; background-image:url(images/light.png); background-repeat:no-repeat; background-position:center top; overflow:hidden;">
<div id="app">

<div id="mainBody">
    <div id="cloud1" class="cloud"></div>
    <div id="cloud2" class="cloud"></div>
</div>


<div class="logintop">
    <span>欢迎登录后台管理界面平台</span>
    <ul>
        <li><a href="#">回首页</a></li>
        <li><a href="#">帮助</a></li>
        <li><a href="#">关于</a></li>
    </ul>
</div>

<div class="loginbody">

    <span class="systemlogo"></span>

    <div class="loginbox">
        <form>
            <ul>
                <li><input name="username" type="text" class="loginuser" v-model="username"/></li>
                <li><input name="password" type="password" class="loginpwd" v-model="password"/></li>
                <li><input name="" type="button" class="loginbtn" value="登录" @click="login()"/>
                    <label><input name="" type="checkbox" value="" checked="checked"/>记住密码</label>
                    <label><a href="#">忘记密码？</a></label></li>
            </ul>
        </form>


    </div>

</div>


<div class="loginbm">柳州城市职业学院版权所有</div>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            username:'test2',
            password:'123456'
        },
        methods:{
            login(){
                if (this.username==''){
                    alert('请输入用户名');
                }else if (this.password==''){
                    alert('请输入密码');
                }else {
                    axios.post("/backstage/login",null,{
                        params:{
                            username: this.username,
                            password: this.password
                        }
                    }).then(response=>{//then表示获取接口返回信息
                        const data=response.data;//response.data表示获取接口返回的数据
                        if (data.success){//成功
                            location.href="main.html";
                        }else {
                            alert(data.msg);
                        }
                    })
                }
            }
        }
    });
</script>
</body>
</html>
